<template>
	<view style="width: 100%; height: 100vh; background: #fa3606; overflow: auto;">
		<view class="huiyuan">
			<image src="/static/hybg.png" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;"></image>
			<div class="top-totle">享单单5折</div>
			<div style="font-size: 64upx; position: absolute; left: 92upx; top: 540upx; font-weight: bold; color: #ff5608;">单单享5折</div>
			<div style="font-size: 24upx; position: absolute; left: 96upx; top: 630upx; color: #dd4547;">1700＋城市通用   每单最高享10元</div>
			<div class="message-box">
				<div class="message-list" :style="'top: -' + (itemIndex * 64) + 'rpx'">
					<div class="message-item" v-for="(item, index) in list" :key="index">
						<image src="/static/logo.png" style="width: 30upx; height: 30upx; margin-right: 4upx; margin-left: 20upx;"></image>
						<text>{{ item.name }}</text>
						<text style="margin-left: 20upx;">{{ item.message }}</text>
					</div>
				</div>
			</div>
			<div class="price-box">
				<div class="price-list" :style="'width:' + (priceListLength * 285 + 20) + 'rpx'">
					<div class="price-item" v-for="(item, index) in priceList" @click="active = item.id"
						:style="'background: url('+ (active == item.id ? hya1 : hya0) +') center center / 100% 100%;'">
						<view class="price-title">电小童</view>
						<view class="price-name">会员{{ infoJson[item.id].name }}卡</view>
						<view class="price-price">¥{{ item.tcyhPrice }}</view>
						<view class="price-num">¥{{ item.tcPrice }}</view>
					</div>
				</div>
			</div>
			<div class="info-row">
				<text style="font-size: 28upx; color: #717171; margin-left: 25upx;">{{ infoJson[active].name }}卡会员</text>
				<text style="font-size: 28upx; color: #717171; margin-right: 25upx;">最高可省{{ infoJson[active].price }}元</text>
			</div>
			<div style="position: absolute; width: 100%; left: 0; top: 1180upx; text-align: center; height: 40upx;
				line-height: 40upx; font-size: 26upx;">
				<checkbox-group @change="changeCheck" style="display: inline-block; transform-origin: 50% 50%; transform: scale(0.8);">
					<checkbox value="check" :checked="true"/>
				</checkbox-group>
				<text>点击即同意</text>
				<text @click="weituoshu(1)" style="color: #04BE02;">《委托扣款授权书》</text>
				<text @click="weituoshu(2)" style="color: #04BE02;">《用户协议》</text>
			</div>
			<div @click="payHuiyuan" class="huiyuan-button" :style="'background: url('+ hyb +') center center / 100% 100%;'">
				<div class="button-num">{{ selePrice }}元</div>
			</div>
		</view>
		
	</view>
</template>

<script>
import { HTTP } from '../../http.js'
let http = new HTTP;
export default {
	data() {
		return {
			list: [
				{ name: '小伟13092916991', message: '使用会员月卡，打折充10单，省88元' },
				{ name: '关智玮', message: '使用会员月卡，打折充15单，省126元' },
				{ name: '最美的彩虹', message: '使用会员月卡，打折充21单，省188元' },
				{ name: '傻不愣登', message: '使用会员月卡，打折充25单，省230元' },
				{ name: '悟々空', message: '使用会员月卡，打折充28单，省288元' },
				{ name: '小强', message: '使用会员月卡，打折充31单，省315元' },
				{ name: '孙彤', message: '使用会员月卡，打折充42单，省366元' },
				{ name: '1', message: '使用会员月卡，打折充16单，省155元' },
				{ name: '老实正直之人', message: '使用会员月卡，打折充24单，省247元' },
				{ name: '心雨', message: '使用会员月卡，打折充9单，省79元' },
				{ name: '喃喃木', message: '使用会员季卡，打折充61单，省620元' },
				{ name: '欢乐马', message: '使用会员季卡，打折充55单，省580元' },
				{ name: '董KD', message: '使用会员季卡，打折充68单，省720元' },
				{ name: '用悲伤诠释对', message: '使用会员季卡，打折充37单，省390元' },
				{ name: 'A 差不多的先生', message: '使用会员季卡，打折充72单，省780元' },
				{ name: 'David', message: '使用会员季卡，打折充88单，省930元' },
				{ name: '不在', message: '使用会员季卡，打折充80单，省750元' },
				{ name: '马海鑫', message: '使用会员季卡，打折充71单，省550元' },
				{ name: 'song.焕', message: '使用会员季卡，打折充89单，省1012元' },
				{ name: '旭日东升', message: '使用会员季卡，打折充53单，省430元' },
				{ name: '八零后', message: '使用会员年卡，打折充150单，省1300元' },
				{ name: 'AAA造型，品质半永久纹绣', message: '使用会员年卡，打折充166单，省1780元' },
				{ name: '蓝鲸！', message: '使用会员年卡，打折充180单，省1940元' },
				{ name: '局气', message: '使用会员年卡，打折充199单，省1880元' },
				{ name: '李强二哥家牛肉汤15139496866', message: '使用会员年卡，打折充316单，省3218元' },
				{ name: '心想事成', message: '使用会员年卡，打折充221单，省2164元' },
				{ name: '武。', message: '使用会员年卡，打折充266单，省2753元' },
				{ name: 'S', message: '使用会员年卡，打折充188单，省1821元' },
				{ name: 'A得道驾校「」李远勃', message: '使用会员年卡，打折充211单，省1886元' },
				{ name: '红黄蓝 慧慧老师 15721925015', message: '使用会员年卡，打折充260单，省2406元' }
			],
			itemIndex: 0,
			
			hya0: require('../../static/hya0.png'),
			hya1: require('../../static/hya1.png'),
			hyb: require('../../static/hyb.png'),
			
			active: '',
			priceList: [],
			priceListLength: 0,
			infoJson: {
				week: { name: '周', price: '70' },
				month: { name: '月', price: '300' },
				quarter: { name: '季', price: '900' },
				year: { name: '年', price: '3650' },
			},
			check: true
		}
	},
	methods: {
		getVipInfo(userId) {
			return new Promise((succ, err) => {
				http.request({
					url: `vip/getUserVipStatus?userId=${ userId }`,
					method: 'get',
					success: (res) => {
						succ(res.dataList);
					}
				});	
			});
		},
		changeCheck(e) {
			if (e.type == "change" && e.detail.value.length > 0) {
				this.check = true;
			} else {
				this.check = false;
			}
		},
		weituoshu(type) {
			uni.navigateTo({ url: 'shouquanshu' + type });
		},
		changeItemIndex() {
			setTimeout(() => {
				this.itemIndex++;
				if (this.itemIndex >= this.list.length) this.itemIndex = 0;
				this.changeItemIndex();
			}, 3000);
		},
		getPrice() {
			http.request({
				url: `vip/vipPrice?a=a`,
				method: 'get',
				success: (res) => {
					console.log(res, 'price');
					this.priceList = res.dataList || [];
					this.priceListLength = this.priceList.length;
					this.active = this.priceList[0].id;
				}
			});
		},
		payHuiyuan() {
			if (this.check) {	
				uni.showLoading({ title: '加载中' });				
				http.request({
					url: `vip/payVipFee?userId=${ this.user.userId }&tcId=${ this.active }`,
					method: 'get',
					success: (res) => {	
						uni.hideLoading();
						console.log(res, 'resinfo')
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.dataList.timeStamp,
							nonceStr: res.dataList.nonceStr,
							package: res.dataList.package,
							signType: 'MD5',
							paySign: res.dataList.paySign,
							success: (res) => {
								this.getVipInfo(this.user.userId).then((res) => {
									res.token = this.user.token;
									res.sessionKey = this.user.sessionKey;
									uni.setStorage({ 
										key: 'user', data: res,
										success: () => {
											uni.navigateBack({ delta: 1 });
										} 
									});
								});								
							},
							fail: (err)=>{				
								uni.showToast({ icon: 'none', title: '支付失败！', duration: 2000 });		
							}
						});		
					}
				});
			} else {		
				uni.showModal({
					title: '提示',
					content: '您未勾选会员协议说明'
				});	
			}	
		}
	},
	computed: {
		selePrice() {
			let sele = this.priceList.find(item => item.id == this.active);
			return sele ? sele.tcyhPrice : '';
		}
	},
	onLoad() {
		let user = uni.getStorageSync('user');
		this.user = JSON.parse(JSON.stringify(user));
		this.changeItemIndex();
		this.getPrice();
	}
}
</script>

<style>
.huiyuan {
	width: 100%;
	height: 1440upx;
	position: relative;
}

.huiyuan .top-totle {
	font-size: 120upx;
	font-weight: bold;
	font-style: italic;
	color: #ffff00;
	text-align: center;
	width: 100%;
	position: absolute;
	left: 0;
	top: 250upx;
}

.huiyuan .message-box {
	width: 650upx;
	height: 64upx;
	overflow: hidden;
	position: absolute;
	left: 49upx;
	top: 795upx;
	border-radius: 32upx;
	border: solid 1upx #d3b070;
}
.huiyuan .message-list {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s;
}
.huiyuan .message-item {
	width: 100%;
	height: 64upx;
	display: flex;
	font-size: 26upx;
	color: #999;
	align-items: center;
}

.huiyuan .price-box {
	width: 680upx;
	height: 175upx;
	overflow-x: auto;
	overflow-y: hidden;
	position: absolute;
	left: 35upx;
	top: 880upx;
}
.huiyuan .price-list {
	overflow: hidden;
}
.huiyuan .price-item {
	width: 264upx;
	height: 175upx;
	position: relative;
	margin-left: 20upx;
	float: left;
}
.huiyuan .price-title {
	width: 100%;
	text-align: center;
	line-height: 20upx;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 16upx;
	color: #fff;
}
.huiyuan .price-name {
	width: 100%;
	text-align: center;
	line-height: 40upx;
	font-size: 24upx;
	color: #666;
	position: absolute;
	left: 0;
	top: 25upx;
}
.huiyuan .price-price {
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 67upx;
	font-size: 40upx;
	color: red;
}
.huiyuan .price-num {
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 124upx;
	font-size: 26upx;
	color: #ccc;
	text-decoration: line-through;
}

.huiyuan .info-row {
	width: 670upx;
	height: 56upx;
	background-color: #ececec;
	border-radius: 18upx;
	position: absolute;
	left: 35upx;
	top: 1100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@keyframes ball {
	0% { transform: scale(1); }
	25% { transform: scale(1.02); }
	50% { transform: scale(1.1); }
	75% { transform: scale(1.02); }
	100% { transform: scale(1); }
}
.huiyuan .huiyuan-button {
	width: 650upx;
	height: 100upx;
	position: absolute;
	left: 35upx;
	top: 1250upx;
	animation-name: ball;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
.huiyuan .button-num {
	width: 180upx;
	position: absolute;
	left: 20upx;
	top: 0;
	height: 100upx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: red;
	font-size: 36upx;
}
</style>
